
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>铁路的猫娘个人网站</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            background-color: #fff0f5; /* 浅粉色背景 */
            margin: 0;
            padding: 0;
            color: #6a4c93; /* 浅紫色文字 */
            background-image: url("https://www.transparenttextures.com/patterns/cat-paw-print.png"); /* 猫爪背景图案 */
        }

        /* 头部样式 */
        .header {
            background: linear-gradient(45deg, #ff9a9e, #fad0c4); /* 粉红色渐变 */
            color: #fff;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-bottom: 4px solid #ff6f61; /* 底部边框 */
        }

        .header h1 {
            margin: 0;
            font-size: 32px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* 容器样式 */
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 20px; /* 大圆角 */
            transition: transform 0.3s ease-in-out;
        }

        .container:hover {
            transform: translateY(-5px);
        }

        /* 个人资料样式 */
        .profile {
            text-align: center;
            margin-bottom: 30px;
        }

        .profile img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-bottom: 20px;
            border: 4px solid #ff9a9e; /* 粉红色边框 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out;
        }

        .profile img:hover {
            transform: scale(1.1);
        }

        .profile h2 {
            margin: 0;
            font-size: 24px;
            color: #ff6f61; /* 粉红色文字 */
        }

        .profile p {
            margin: 10px 0;
            font-size: 16px;
            color: #6a4c93; /* 浅紫色文字 */
        }

        /* 哔哩哔哩板块样式 */
        .bilibili {
            margin-top: 30px;
            background: linear-gradient(45deg, #00a1d6, #80d0c7); /* 蓝色渐变 */
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            color: #fff;
            text-align: center;
        }

        .bilibili h2 {
            margin: 0 0 20px;
            font-size: 20px;
        }

        .bilibili a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease-in-out;
        }

        .bilibili a:hover {
            color: #ff9a9e; /* 悬停时变为粉红色 */
        }

        /* 项目板块样式 */
        .projects {
            margin-top: 30px;
        }

        .projects h2 {
            margin: 0 0 20px;
            font-size: 20px;
            color: #ff6f61; /* 粉红色文字 */
            text-align: center;
        }

        .project {
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(255, 182, 193, 0.2); /* 浅粉色背景 */
            border-radius: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-in-out;
        }

        .project:hover {
            transform: translateY(-3px);
        }

        .project h3 {
            margin: 0 0 10px;
            font-size: 18px;
            color: #6a4c93; /* 浅紫色文字 */
        }

        .project p {
            margin: 0;
            font-size: 14px;
            color: #6a4c93; /* 浅紫色文字 */
        }

        /* 页脚样式 */
        .footer {
            background: linear-gradient(45deg, #ff9a9e, #fad0c4); /* 粉红色渐变 */
            color: #fff;
            text-align: center;
            padding: 15px 20px;
            position: fixed;
            bottom: 0;
            width: 100%;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        }

        .footer p {
            margin: 0;
            font-size: 14px;
        }

        .footer a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease-in-out;
        }

        .footer a:hover {
            color: #00a1d6; /* 悬停时变为蓝色 */
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>铁路的猫娘个人网站</h1>
    </div>
    <div class="container">
        <div class="profile">
            <img src="your-avatar.jpg" alt="铁路">
            <h2>铁路</h2>
            <p>欢迎来到我的猫娘风格个人网站喵~</p>
        </div>
        <div class="bilibili">
            <h2>我的哔哩哔哩主页</h2>
            <p>欢迎访问我的哔哩哔哩主页，查看更多视频和动态喵~</p>
            <p><a href="https://m.bilibili.com/space/[BILIBILI_UID]" target="_blank"></a></p>
        </div>
        <div class="projects">
            <h2>我的项目</h2>
            <div id="project-list"></div>
        </div>
    </div>
    <div class="footer">
        <p>更多项目请访问我的Gitee主页：<a href="https://gitee.com/[GITEE_USER]/dashboard/projects" target="_blank"></a>点击这里喵</a></p>
    </div>
    <script>
        async function fetchGiteeProjects() {
            const url = 'https://gitee.com/api/v5/users/[GITEE_USER]/repos?access_token=YOUR_GITEE_TOKEN';
            try {
                const response = await fetch(url);
                const projects = await response.json();
                return projects.map(project => ({
                    name: project.name,
                    description: project.description,
                    url: project.html_url
                }));
            } catch (error) {
                console.error('Error fetching Gitee projects:', error);
                return [];
            }
        }

        async function fetchHuaweiProjects() {
            const url = 'https://devcloud.cn-north-4.huaweicloud.com/api/v1/projects?access_token=YOUR_HUAWEI_TOKEN';

            try {
                const response = await fetch(url);
                const projects = await response.json();
                return projects.map(project => ({
                    name: project.name,
                    description: project.description,
                    url: project.web_url
                }));
            } catch (error) {
                console.error('Error fetching Huawei projects:', error);
                return [];
            }
        }

        async function fetchGitHubProjects() {
            const url = 'https://api.github.com/users/[GITHUB_USER]/repos';

            try {
                const response = await fetch(url);
                const projects = await response.json();
                return projects.map(project => ({
                    name: project.name,
                    description: project.description,
                    url: project.html_url
                }));
            } catch (error) {
                console.error('Error fetching GitHub projects:', error);
                return [];
            }
        }

        async function fetchAllProjects() {
            const giteeProjects = await fetchGiteeProjects();
            const huaweiProjects = await fetchHuaweiProjects();
            const githubProjects = await fetchGitHubProjects();

            const allProjects = [...giteeProjects, ...huaweiProjects, ...githubProjects];
            const projectList = document.getElementById('project-list');
            projectList.innerHTML = '';
            allProjects.forEach(project => {
                const projectDiv = document.createElement('div');
                projectDiv.className = 'project';
                projectDiv.innerHTML = `
                    <h3><a href="${project.url}" target="_blank">${project.name}</a></h3>
                    <p>${project.description}</p>
                `;
                projectList.appendChild(projectDiv);
            });
        }

        // 调用函数获取所有项目列表
        fetchAllProjects();
    </script>
    
</body>
</html>

   